<template>
    <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import TOKEN from '@/utils/cesium/token.js';
import LaserPolylineTrailLinkMaterialProperty from './PolylineProperty'

const CesiumObj = {
    viewer: null,
};
onMounted(async () => {
    Cesium.Ion.defaultAccessToken = TOKEN;
    // 实例化
    const viewer = new Cesium.Viewer('cesiumContainer', {
        // 界面控件 全部关闭
        animation: false, // 左下角的动画控制器组件
        baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: true, // 全屏组件
        vrButton: false, // VR模式
        geocoder: false, // 地理编码（搜索）组件
        homeButton: false, // 首页，点击之后将视图跳转到默认视角
        infoBox: false, // 信息框
        sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, // 时间轴
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: false,
    });
    // 隐藏logo
    viewer._cesiumWidget._creditContainer.style.display = 'none';
    // 资产地形

    // viewer.scene.camera.setView({
    //     destination: Cesium.Cartesian3.fromDegrees(120.546, 32.567, 500),
    //     endTransform: Cesium.Matrix4.IDENTITY,
    // });
    CesiumObj.viewer = viewer;
    initEntity();
});

/* 在 Cesium.js 中，MaterialProperty（材质属性）是用于定义材质在时间和空间上变化的动态属性。
       它提供了一种机制，可以根据时间、位置、实时数据等动态因素来控制材质的外观效果。 */
class ConsumerMaterialProperty {
    constructor(duration = 1000, color = '#000') {
        this.definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this._time = new Date().getTime();
    }
    addMaterial() {
        Cesium.Material.PolylineTrailLinkType = 'ConsumerMaterial';
        Cesium.Material.PolylineTrailLinkImage = Cesium.buildModuleUrl("/arrow.png");
        Cesium.Material.PolylineTrailLinkSource =
            'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
 { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st;\n\
    vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
     material.alpha = colorImage.a * color.a;\n\
     material.diffuse = (colorImage.rgb + color.rgb) / 2.0;\n\
     return material;}';
        // 它用于在 Cesium 中的材质缓存中添加新的材质。
        Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
            fabric: {
                type: Cesium.Material.PolylineTrailLinkType,
                uniforms: {
                    color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                    image: Cesium.Material.PolylineTrailLinkImage,
                    time: 20,
                },
                source: Cesium.Material.PolylineTrailLinkSource,
                translucent: function (material) {
                    return true;
                },
            },
        });
    }
    eventhandle(arg1) {
        console.log('监听事件被调用', arg1);
        this.myArg1Copy = arg1;
    }
    getType(time) {
        return  Cesium.Material.PolylineTrailLinkType;
    }
    getValue(time, result) {
        // 返回材质值
        if (!Cesium.defined(result)) {
            result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(
            this._color,
            time,
            Cesium.Color.WHITE,
            result.color
        );
        result.image = Cesium.Material.PolylineTrailLinkImage;
        result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;
        return result;
    }
    equals(other) {
        return (
            this === other ||
            (other instanceof LaserPolylineTrailLinkMaterialProperty &&
                Cesium.Property.equals(this._color, other._color))
        );
    }
}

function initEntity() {
    const viewer = CesiumObj.viewer;
    // const material = new ConsumerMaterialProperty();
    const material = new LaserPolylineTrailLinkMaterialProperty();
    // 创建折线实体
    const polyline = viewer.entities.add({
        polyline: {
            // 定义折线的经纬度坐标点（Cartesian3数组）
            positions: Cesium.Cartesian3.fromDegreesArray([
                116.39,
                39.9, // 起点：北京
                121.47,
                31.23, // 终点：上海
                113.26,
                23.13, // 可添加更多点
            ]),
            // 折线宽度
            width: 30,
            // 折线颜色
            material: material,
        },
    });
    console.log(material, 'material');
    viewer.zoomTo(polyline);
}
</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
}
</style>
